<template>
  <div class="app">
    <h2>当前sum1为：{{ sum1 }}</h2>
    <h2>当前sum2为：{{ sum2 }}</h2>
    <button @click="changeSum1">点我sum1+1</button>&nbsp;
    <button @click="changeSum2">点我sum2+1</button>

    <h3>汽车1:{{ car1 }}</h3>
    <h3>汽车2:{{ car2 }}</h3>

    <button @click="changeCar">修改汽车</button>
    <button @click="changeCarYellow">修改颜色</button>
  </div>
</template>

<script setup lang="ts">
import { ref, readonly, reactive, shallowReadonly } from "vue";

let sum1 = ref(0);
/**
 * readonly需要传递一个对象，不需要.value
 * 并且它们是相关联的，也就是说sum1和sum2，你改sum1，sum2也会改
 */
let sum2 = readonly(sum1);

let car1 = reactive({
  brand: "奔驰",
  options: {
    oil: "600",
    color: "yellow",
  },
});

let car2 = shallowReadonly(car1);

function changeSum1() {
  sum1.value += 1;
}

function changeSum2() {
  // 注意：因为是只读的所以，不可以修改
  // sum2.value += 1;
}

function changeCar() {
  // 这里会保存，因为你用了shallowReadonly，它只会给你第一层设置只读
  // car2.brand = "宝马";
}
function changeCarYellow() {
  // 因为是shallowReadonly所以它这里是可以正常修改的，因为你是在第二层
  car2.options.color = "red";
}
</script>

<style scoped></style>
